I want to build a commercial, scroll-based website that sells my app BrainBean. BrainBean is a student planning app that combines time-block scheduling + task checklists, plus daily/weekly/semester goals, progress check-ins, mood logging, reminders, and subject/category management. The website is not the actual app—its job is to show the UI and explain how each feature works, so people feel confident enough to click Request Demo.
This site will use hotspots on UI images. Clicking a hotspot shows a tooltip near the feature and updates this panel with a clear explanation (the app is not actually running on the website).
Calm, supportive, competent, and slightly premium—like a study tool that feels reliable instead of pushy.
The homepage should feel confident and clean (sales-ready), while the interactive tour is more explanatory and reassuring (it teaches what each feature does). The analysis section is practical and business-like (clear competitors, clear value, clear cost).
I noticed most planning tools fail students in one of two ways: they’re either calendar-only (too rigid) or list-only (too vague). BrainBean’s concept is “both”: tasks can be timed or anytime, then goals and check-ins add motivation, and logging (especially artwork uploads) turns progress into proof.
Students who need structure for school but don’t want a harsh “productivity culture” vibe—especially students balancing multiple subjects and creative outputs.
Mina is a first-year student juggling classes, deadlines, and random life tasks. She clicks because she wants one screen that answers “what do I do right now?” She needs timed tasks, a clear Today view, and reminders that feel helpful instead of stressful. She’ll return if setup is fast and the Today screen stays simple.
Jay is a creative student who works in bursts and stays motivated by visible progress. He clicks because he wants to track outcomes (sketches, drafts, artworks) and review them day by day. He needs the process log, upload support, and a flip/scroll history that makes effort feel real. He’ll return if logging feels like a portfolio diary, not extra homework.
Emma’s productivity depends on her mood and energy. She clicks because she wants a tool that acknowledges emotion without turning into therapy. She needs a fast emoji mood input plus optional text, and a way to notice patterns over time. She’ll return if mood tracking is lightweight and non-judgmental.
The site opens with BrainBean’s loading/cover screen, then shows the “Current Tasks” view (completed vs not completed) immediately—so the app looks real and useful in seconds. The headline is simple and direct: Plan. Focus. Reflect. The design should feel commercial and premium using soft pastel blue with a serif + sans pairing.
The main CTA is Request Demo (not download), because the website is designed like a product pitch. I’ll repeat the CTA after the interactive tour and again at the end, so the user always has a next step after understanding the features.
I’m using a modern, commercial UI portfolio template style (large color sections, clean hierarchy, strong visuals) rather than lots of borders/boxes. I want the page to feel like a sales deck you scroll through.
The website is built as 5 scroll sections, each with a different layout template and color-block separation. The core interaction is a hotspot product tour: users click on parts of the app UI screenshots, and the site shows a tooltip plus a side explanation panel describing what that feature does and why it matters. The app UI itself stays as images—interactive explanation, not a functioning app.